﻿@using DevExpress.Blazor

<div class="demo-description">
    <h2><DemoNavLink Link="SchedulerResources#GroupByDate" />Group by Date</h2>
    <p>This demo illustrates how you can group scheduled appointments by date. When appointments are grouped by date and the Scheduler component displays multiple dates and resources, resource headers are grouped under date headers.</p>
    <p>To group appointments by date, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxScheduler.GroupType">GroupType</a> property to <b>Date</b>.</p>
</div>

<div class="option-container">
    <DxCheckBox @bind-Checked="@ResourceColorInHeaderVisible">Resource Color In Header Visible</DxCheckBox>
</div>

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Date"
             ResourceColorInHeaderVisible="@ResourceColorInHeaderVisible"
             CssClass="mw-1100">
    <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"></DxSchedulerDayView>
</DxScheduler>

<CodeSnippet_Scheduler_GroupByDate></CodeSnippet_Scheduler_GroupByDate>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

    bool ResourceColorInHeaderVisible { get; set; } = true;
}
